import { Drawer, Dropdown, Menu, message, Table, TableProps } from 'antd'
import dayjs from 'dayjs'
import React from 'react'
import { IUser } from './search-panel'
import { useDocumentTitle } from 'utils'
import { Link } from 'react-router-dom'
import { Pin } from 'components/pin'
import { useEditProject } from 'utils/use-edit-project'
import { ButtonNoPadding } from 'components/lib'
export interface IProject {
  id: number
  name: string
  personId: number
  organization: string
  created: string
  pin?: boolean
}
interface IListProps extends TableProps<IProject> {
  users: IUser[]
  retryCallback?: () => void
  projectButton: JSX.Element
}

export const List = ({ users, retryCallback, ...props }: IListProps) => {
  useDocumentTitle('项目列表', false)

  const { mutate } = useEditProject()
  return (
    <>
      <Table
        rowKey="id"
        {...props}
        columns={[
          {
            title: <Pin checked={true} disabled={true} />,
            render(rowData) {
              return (
                <Pin
                  count={1}
                  checked={rowData.pin}
                  onChangeChecked={pin => {
                    mutate({ id: rowData.id, pin }).then(res => {
                      retryCallback?.()
                      message.info('更新成功!')
                    })
                  }}
                />
              )
            }
          },
          {
            title: '部门',
            // dataIndex: 'name'
            render(rowData) {
              return <Link to={rowData.id + ''}>{rowData.name}</Link>
            }
          },
          { title: '名称', dataIndex: 'organization', key: 'id' },

          {
            title: '负责人',
            render(rowData) {
              return <span>{users.find(user => user.id === rowData.personId)?.name}</span>
            }
          },
          {
            title: '创建时间',
            render(rowData: IProject) {
              return <span>{rowData.created ? dayjs(rowData.created).format('YYYY-MM-DD') : '无'}</span>
            }
          },
          {
            title: '操作',
            render(rowData) {
              return (
                <Dropdown
                  overlay={
                    <Menu>
                      <Menu.Item key={'edit'}>{props.projectButton}</Menu.Item>
                    </Menu>
                  }
                >
                  <ButtonNoPadding type={'link'}>...</ButtonNoPadding>
                </Dropdown>
              )
            }
          }
        ]}
      />
    </>
  )
}
